<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <input type="text" name="" id="ipt" />
  <button id="btn">发送</button>
  <textarea name="" id="txt" cols="30" rows="10"></textarea>
  <script>
    // WebSocket构造函数，创建WebSocket对象
    //  参数是 socket服务器地址

    // 去链接sockety服务器--  ip地址得改成 自己电脑的ip
    // 服务器的启动（代码）-还得启动socket server--npm -i--  npm start


    let ws = new WebSocket("ws://192.168.5.27:3000");
    // let ws = new WebSocket("ws://127.0.0.1:3000");

    // 连接成功后的回调函数
    ws.onopen = function (params) {
      console.log("客户端连接成功");
      // 向服务器发送消息
      // ws.send("hello");
    };

    // 从服务器接受到信息时的回调函数
    ws.onmessage = function (e) {
      console.log("收到服务器响应", e.data);
      txt.value += "\n" + e.data;
    };

    // // 连接关闭后的回调函数
    ws.onclose = function (evt) {
      console.log("关闭客户端连接");
    };

    // 连接失败后的回调函数
    ws.onerror = function (evt) {
      console.log("连接失败了");
    };

    btn.onclick = function () {
      // 点击的时候，获取了输入框的值，发送给服务器
      ws.send(ipt.value);
    };
  </script>
</body>

</html>